[CSS] 웹페이지 scroll 이동, 스크롤링 막는 다양한 방법 overflow

웹페이지 CSS를 사용하여 스크롤을 이동하지 않도록 막는 다양한 방법에 대하여 알아보려고 합니다. 특히 모바일 환경에서의 이슈도 함께 알아봅니다.

# 웹사이트 스크롤을 이동하지 않도록 고정하기

콘텐츠의 길이가 길면 상하 스크롤이 나타나겠죠. 만약 이런 스크롤이 안보이도록... 이동하지 않도록 하려면 어떻게 할 수 있을까요? 그 전에 스크롤 이동을 언제 왜 막아야할까요? 가장 많이 사용되는 이유입니다.

1. 모달, 팝업 등 을 보여주는 경우 뒤 화면이 이동하지 않도록 하기
2. 로딩등의 이유로 딤드(dimmed) 처리된 경우

방법은 아래와 같이 세 가지가 존재합니다. 하나씩 알아봅니다. 

! overflow: hidden을 사용하는 방법

이 방법도 css만 사용하므로 매우 간편하고 효과적인 방법입니다. 동일하게 스크롤 영역이 존재하는 태그에 overflow: hidden을 추가하면 되죠.

단점이라면? 일부 모바일 및 기타 환경에서 스크롤 이동 가능할 수 있습니다  하지만 데스크탑 등 대부분의 환경에서는 스크롤 동작이 되지 않습니다. 이유를 알아보면 fixed 처럼 고정을 시키는게 아니기 때문에 터치 이벤트를 사용하는 환경 등에서 스크롤이 동작할 수 있습니다. 이런 문제를 보완하기 위해서 height: 100%를 함께 사용하는게 더 안전한 방법입니다.

그럼 다음은 모바일 환경을 고려한 방법입니다.

! css overflow: hidden과 touch-action 사용하기
이 방법은 모바일 특히 iOS 등에서 사용하기 위한 방법입니다. 스크롤과 터치 css 속성을 동시에 사용하는 방법이죠.

여기서 body * 선택자를 사용한 이유는 touch-action은 해당 영역에서만 동작하기 때문입니다. 즉 부모 요소에서 상속(inherit) 되어 동작하지 않습니다.

! CSS position:fixed를 사용하는 방법

추천하는 방법입니다. position: fixed를 사용하는 방법은 css만 사용하므로 간단하고 모바일 및 다양한 환경에서 가장 확실히 동작하는 방법이죠. 방법은 스크롤이 존재하는 태그가 body라면 body 태그 영역에 position:fixed 스타일을 추가하면 됩니다.

가장 추천하는 방법이지만 단점이 존재합니다. 기존의 스크롤이 사라지기 때문에 position: fixed 속성을 제거할 경우 스크롤 위치가 리셋된다는 점이죠. 다시 말해 스크롤 중간에 위치했던 부분이 사라지는 단점이 있습니다. 큰 이슈는 아니므로 큰 문제가 안된다면 이 방법도 괜찮은 방법입니다.

# 모바일 환경에서의 알아야 할 점

모바일 웹의 경우 iOS 버전 등에 따라 스크롤링이 다르게 나타날 수 있습니다. 앞에 언급한 것 처럼 터치 이벤트 등 이벤트 제거가 데스크탑 환경과 다른 이유입니다. 이런 이유로 아래의 방법이 선호됩니다.

아니면 아래처럼 두 가지 방법을 함께 사용합니다.

다른 방법으로는 자바스크립트로 아예 스크롤 이벤트 자체를 제어하는 방법입니다.


여기까지 CSS를 사용한 다양한 스크롤 이동 제어, 제거 방법에 대하여 자세히 알아봤습니다. 아래는 함수를 하나 만들어 원하는 태그에 overflow: hidden; height: 100%를 사용하여 스크롤이 동작하지 않도록 만들어보려고합니다.

! 스크롤 제어하는 함수 만들기, toggleScrolling();

함수 toggleScrolling()을 실행하면 스크롤이 사라지게 되겠죠. 한 번 더 클릭하면 다시 나타나는 토글 방식의 스크롤입니다.

@ toggleScrolling() 함수 만들기

코드는 모두 완성되었습니다. 선택한 엘리먼트의 css ovefflow 속성값이 hidden인지 확인 후  토글 방식으로 동작합니다.

그럼 간단한 예제를 만들어볼께요. 버튼은 함수를 실행시킵니다.

아래 엘리먼트에는 스크롤이 있는데 버튼을 클릭하면 스크롤이 사라지고 나타나고를 반복하게 되겠죠. 그럼 클릭해보세요.